<template>
<div class="topbar">

    <!-- 960px -->
    <div class="nav-pc">
        
        <nav class='nav-pc-content'>

            <router-link exact=" item.path === '/' " class='link nav-pc-item'  :to="item.path"  v-for="(item, index) of navConfig" :key='index'>
                {{item.label}}
            </router-link>

        </nav>

        <div class="nav-pc-item sub-fn">

                <div class="email">
                    <i class="iconfont icon-youxiang"></i>
                    电邮
                </div>
                
                <div class="facebook ">
                    <i class="iconfont icon-facebook-fill"></i>
                    脸书
                </div>
                
        </div>
        
        
    </div>


    <!-- 768px -->
    <div class="nav-phone">

        
     <div class="menu" @click='switchMenu'>
        <i class="iconfont icon-menu"></i>
     </div>

     <transition name='up-down'>
     
      <div class="menu-dropdown" v-if="showMenu">

           <nav class='nav-phone-content' @click='switchMenu'>

            <router-link exact=" item.path === '/' " class='link nav-phone-item'  :to="item.path"  v-for="(item, index) of navConfig" :key='index'>
                {{item.label}}
            </router-link>

            </nav>

            <div class="nav-phone-item sub-fn">

                <div class="email">
                    <i class="iconfont icon-youxiang"></i>
                    电邮
                </div>
                
                <div class="facebook ">
                    <i class="iconfont icon-facebook-fill"></i>
                    脸书
                </div>
                    
            </div>
        
      </div>
      
     </transition>

        
    </div>

    
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';


export interface navItem{

    label: string,
    path: string,
    
}

@Component
export default class Topbar extends Vue{

    @Prop() 
    navConfig?: Array<navItem>

    showMenu: Boolean = false

    switchMenu(e:any){

        console.log(this.showMenu);
        
        this.showMenu = !this.showMenu;
    }

}


</script>

<style scoped lang='less'>

.router-link-active{
    background: @mainCOlorDark;
}

.topbar{
    background: @mainColor;
}

.nav-pc{
    .max-page-width();
    
    display: flex;
    justify-content: space-between;
    align-items: center;    
    background: @mainColor;
}

.nav-pc-content{

    flex: 1 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    

    .link{
        color: @fontColorLight;
    }
    
}

.nav-pc-item{
    display: inline-block;
    padding: 16*@rem 10*@rem;
    font-size: 16*@rem;
}

.sub-fn{
    @w: 120*@rem;
    flex: 0 0 @w;
    display: flex;
    justify-content: center;
    align-items: baseline;
    // background: red;

    width: @w;

    & > div{
        
        display: flex;
        padding: 0  4*@rem;
        align-items: center;
        text-align: center;
        font-size: 10*@rem;
        color: @fontColorLight;

        & + &{
            margin-left: 16*@rem;
        }
    }

    .iconfont{
        display: inline-block;
        font-size: 18*@rem;
        
    }

    
}

.nav-phone{
    display: none;
}

/*  760px  */

@media (max-width: 768px){

    .nav-pc{
        display: none;
    }
    
    .nav-phone{
        position: relative;
        display: block;
        padding: 6*@rem 20*@rem;
        
        .menu{
            // float: right;
            font-size: 18*@rem;
            text-align: right;
            color: @fontColorLight;
        }
    
        .menu-dropdown{
            position: absolute;
            top: 100%;
            right: 0;
            
            width: 100%;
            background: @mainColor;
        }
        .nav-phone-item{
            display: block;
            padding: 16*@rem 26*@rem;
            text-align: center;
            font-size: 16*@rem;
            color: @fontColorLight;
        }

        .nav-phone-item + .nav-phone-item{
            border-top: 1*@rem solid @fontColorLight;
        }
        
        .sub-fn{
            display: none;
        }
        
    }
    
}


</style>